<template>
  <div class="login">
    <div class="login_top">
      <img class="logoimg" src="../../../static/images/zlogin.png"/>
      <div class="note" v-if="data.length>0">
        <p style="vertical-align: center">
          <img style="margin-bottom: 10px;"
               src="../../../static/images/sound.png"
          /><span style="display: inline-block;width: 420px;">
              <el-carousel height="24px" style="overflow: hidden;" arrow="never" direction="vertical" :autoplay="true" :interval="4000">
                         <el-carousel-item v-for="(item,index) in data" :key="index">
                                 <router-link
                                   :to="{
                                path: 'noticInfo',
                                query: {
                                    id: item.id,
                                }
                            }"
                                 ><h3 style="cursor: pointer;font-weight: bold;font-size: 20px;color: #606266;">{{ item.noticeTitle }}</h3></router-link
                                 >
                    </el-carousel-item>
                 </el-carousel>
         </span>
        </p>
      </div>
      <div class="loginBox">
        <form class="loginForm fr">
          <div class="login_logo">
            <img src="../../../static/images/zlogin_logo.png"/>
          </div>
          <div class="loginMain">
            <input
              type="text"
              v-model="ruleForm.userAccount"
              placeholder="请输入用户名"
              @keyup.enter="submitForm"
              class="userName"
            />
            <input
              type="password"
              v-model="ruleForm.userPasswd"
              placeholder="请输入密码"
              @keyup.enter="submitForm"
              class="password"
            />

            <div class="clearfix remember">
              <el-checkbox
                label="记住密码"
                name="type"
                v-model="flag"
              ></el-checkbox>
              <router-link to="register">注册</router-link>
            </div>
          </div>

          <div class="loginBtn_box">
            <input type="button" @click="submitForm" value="马上登录"/>
          </div>

          <div class="loginBt">
            <router-link to="getBack">忘记密码？</router-link>
            | &nbsp;
            <router-link to="handbook">用户手册使用下载</router-link>
          </div>
        </form>
      </div>
    </div>

    <p class="login_footer">
      Copy Right © Bossien All Rights Reserved
      武汉博晟安全技术股份有限公司 版权所有
    </p>
  </div>
</template>

<script>
  import config from "../../config.js";
  import {CompanyRouterMap} from '../../router/index.js'

  export default {
    name: "",
    data() {
      return {
        flag: false,
        ruleForm: {
          userAccount: "",
          userPasswd: ""
        },
        data:[]
      };
    },
    created() {

      this.ruleForm.userPasswd = localStorage.password;
      this.login()
      this.info()
    },
    methods: {
      submitForm() {
        if (this.ruleForm.userPasswd && this.ruleForm.userAccount) {
          const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
          /*if (!reg.test(this.ruleForm.userPasswd)) {
            this.$message.warning("您得密码不合法请重新设置密码。")
            this.$router.push('getBack')
            return
          }*/
          var params = {
            userPasswd: this.$md5(this.ruleForm.userPasswd),
            userAccount: this.ruleForm.userAccount
          }
          if (this.flag) {
            localStorage.username = this.ruleForm.userAccount
            localStorage.password = this.ruleForm.userPasswd
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
          }

          this.$axios
            .post(config.baseUrl + "emergency/v1.0/user/login", params)
            .then(res => {
              if (res.data.meta.success) {


                var arr = ['2', '5', '6', '7', '8', '9', '11', '12', '13', '14', '15', '49', '50'],
                  pathname = 'situationexam' //电力行业id
                localStorage.showTime = 0
                localStorage.userid = res.data.data.user.id
                localStorage.businessId = res.data.data.user.businessId
                localStorage.user = JSON.stringify(res.data.data.user)
                localStorage.isPower = arr.indexOf(res.data.data.user.businessId)
                this.$store.state.loginstates = res.data.data.user.userType;
                localStorage.removeItem("newList");
                localStorage.removeItem('monitorQuery')
                this.$monitorQuery.comid = ''
                this.$monitorQuery.pid = ''
                if (this.$store.state.loginstates == 1) {
                  this.$router.addRoutes(CompanyRouterMap);
                  localStorage.setItem('new', JSON.stringify(CompanyRouterMap));
                  this.$router.push('index')
                } else if (this.$store.state.loginstates == 2) {
                  if (arr.indexOf(res.data.data.user.businessId) == -1) {
                    this.$router.push('waitAssess2')
                  } else {
                    this.$router.push('waitAssess')
                  }

                }
              } else {
                this.$message.warning(res.data.meta.message)
              }
            })
            .catch(response => {
              console.log(response);
            });
        } else {
          this.$message.warning("用户名和密码不能为空");
          return false;
        }
      },
      /****电力平台免登陆****/
      login() {
        this.ruleForm.userAccount = this.$route.query.userName;
        this.ruleForm.userPasswd = this.$route.query.passWord;
        let userName = this.$route.query.userName;
        let passWord = this.$route.query.passWord;
        if (userName != null && passWord != null) {
          this.submitForm1(userName, passWord)
        }
      },
      submitForm1(userName, passWord) {
        var params = {
          userPasswd: passWord,
          userAccount: userName
        }
        const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
        if (!reg.test(passWord)) {
          this.$message.warning("您得密码不合法重新设置密码。")
          this.$router.push('getBack')
          return
        }
        if (this.flag) {
          localStorage.username = userName
          localStorage.password = passWord
        } else {
          localStorage.removeItem('username')
          localStorage.removeItem('password')
        }
        this.$axios
          .post(config.baseUrl + "emergency/v1.0/user/login", params)
          .then(res => {
            if (res.data.meta.success) {


              var arr = ['2', '5', '6', '7', '8', '9', '11', '12', '13', '14', '15', '49', '50'],
                pathname = 'situationexam' //电力行业id


              localStorage.showTime = 0
              localStorage.userid = res.data.data.user.id
              localStorage.businessId = res.data.data.user.businessId
              localStorage.isPower = arr.indexOf(res.data.data.user.businessId)
              localStorage.user = JSON.stringify(res.data.data.user)
              this.$store.state.loginstates = res.data.data.user.userType;
              localStorage.removeItem("newList");
              if (this.$route.query.redirect == 'monitor') {
                localStorage.setItem('monitorQuery', JSON.stringify({
                  comid: this.$route.query.userName,
                  pid: this.$route.query.pid
                }))
                this.$monitorQuery.comid = this.$route.query.userName
                this.$monitorQuery.pid = this.$route.query.pid
                this.$router.push({
                  path: 'monitor',
                  query: {
                    pid: this.$route.query.pid,
                    comid: this.$route.query.userName
                  }
                })
              } else {
                localStorage.removeItem('monitorQuery')
                this.$monitorQuery.comid = ''
                this.$monitorQuery.pid = ''
                if (this.$store.state.loginstates == 1) {
                  this.$router.addRoutes(CompanyRouterMap);
                  localStorage.setItem('new', JSON.stringify(CompanyRouterMap));
                  this.$router.push('index')
                } else if (this.$store.state.loginstates == 2) {
                  if (arr.indexOf(res.data.data.user.businessId) == -1) {
                    this.$router.push('waitAssess2')
                  } else {
                    this.$router.push('waitAssess')
                  }

                }
              }
            } else {
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      info(){
        this.$axios({
          method: "post",
          url: this.$baseUrl + "emergency/v1.0/notice/list",
          data: {pageIndex: 1,
            pageSize: 5}
        }).then(res => {
          if (res.data.meta.success) {
             this.data = res.data.data.records;
          } else {

          }
        });
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  .login {
    height: 100%;
    width: 100%;
    background: url("../../../static/images/loginBg.jpg") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .login_top {
      width: 100%;
      height: 100%;
      .logoimg {
        position: absolute;
        left: 50%;
        margin-left: -565px;
        top: 45%;
        margin-top: -292px;
      }
      .note{
        position: absolute;
        left: 98%;
        margin-left: -565px;
        top: 45%;
        margin-top: -292px;
        h3{
          overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
        }
      }
    }
    .loginBox {
      position: absolute;
      background: url("../../../static/images/loginBox_bg.png") no-repeat;
      height: 584px;
      width: 1191px;
      left: 50%;
      margin-left: -595px;
      top: 50%;
      margin-top: -292px;
      .loginForm {
        width: 550px;
        height: 534px;
        margin-top: 18px;
        margin-right: 25px;
        .login_logo {
          //  padding-left: 76px;
          padding-top: 45px;
          margin-bottom: 52px;
          text-align: center;
        }
        .loginMain {
          padding: 0 62px 0 76px;
          > input {
            width: 100%;
            border: 1px solid #dcdcdc;
            border-radius: 8px;
            height: 64px;
            padding-left: 60px;
            margin-bottom: 20px;
            background-repeat: no-repeat;
            background-position: left 15px center;
          }
          > input::placeholder {
            color: #ccc;
          }
          .userName {
            background-image: url("../../../static/images/user_icon1.png");
          }
          .userName:focus {
            background-image: url("../../../static/images/user_icon2.png");
            border-color: #4080ff;
          }
          .password {
            background-image: url("../../../static/images/password_icon1.png");
          }
          .password:focus {
            background-image: url("../../../static/images/password_icon2.png");
            border-color: #4080ff;
          }
          .remember {
            padding: 0 10px 0 5px;
            a {
              float: right;
              color: #999;
            }
            a:hover {
              color: #4080ff;
            }
          }
        }
        .loginBtn_box {
          background: url("../../../static/images/loginBtn_bg.png") no-repeat left 51px center;
          height: 116px;
          padding: 19px 0 0 76px;
          margin-top: 10px;
          > input {
            width: 412px;
            height: 65px;
            cursor: pointer;
            background: transparent;
            border: 0;
            color: #fff;
            font-size: 16px;
          }
          > input:hover {
            opacity: 0.9;
          }
        }
        .loginBt {
          text-align: center;
          color: #999;
          a {
            color: #999;
          }
          a:hover {
            color: #4080ff;
          }
        }
      }
    }
    .login_footer {
      position: fixed;
      bottom: 5%;
      font-size: 12px;
      width: 100%;
      text-align: center;
      color: #888;
    }
  }
</style>
<style>
  .login .el-carousel__indicator--vertical {
    display: none!important;
  }
</style>
